<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-gray">
    <!--提现-->
    <view class="mx-4 pb-10">
      <view class="bg-white rounded-2xl py-2.5 bg-box-shadow">
        <view class="mx-3.5">
          <view class="text-base text-dark leading-8"
            >收款人姓名： {{ info.userName }}</view
          >
        </view>
      </view>
      <view class="bg-white rounded-2xl py-2.5 bg-box-shadow mt-5">
        <view class="mx-3.5">
          <view class="text-base text-dark leading-10">到账金额：</view>
          <view class="flex items-center">
            <view class="text-dark text-2xl">￥</view>
            <view class="">
              <u--input
                placeholder="到账金额"
                placeholderStyle="font-size:28rpx;"
                maxlength="10"
                type="number"
                v-model="money"
                fontSize="72rpx"
                class="border-none text-dark"
                @blur="calcFeeTo(money, 0)"
              ></u--input>
            </view>
            <view class="text-blue-400 text-xs w-24" @click="allCash(number)"
              >全部提现</view
            >
          </view>
          <view class="border-b-gray mt-3"></view>
          <!--计算属性：到账金额-->
          <view class="flex items-center pb-2 mt-3">
            <view class=""
              ><u-icon
                name="/static/icons/icon-withdraw-question.png"
                size="32"
              ></u-icon
            ></view>
            <view class="ml-2">
              <view
                class="text-xs text-light text-center"
                v-if="calcResult.withdrawalAmt != ''"
              >
                {{ calcResult.withdrawalAmt }}
              </view>
              <view class="text-xs text-light text-center" v-else>--</view>
              <view class="text-xs text-light"> 提现金额 </view>
            </view>
            <view class="w-8 text-light text-center text-sm">-</view>
            <view class="ml-2">
              <view
                class="text-xs text-light text-center"
                v-if="calcResult.optFee != ''"
              >
                {{ calcResult.optFee }}
              </view>
              <view class="text-xs text-light text-center" v-else>--</view>
              <view class="text-xs text-light"> 代扣税费 </view>
            </view>
            <view class="w-8 text-light text-center text-sm">=</view>
            <view class="ml-2">
              <view
                class="text-xs text-light text-center"
                v-if="calcResult.accountAmt != ''"
              >
                {{ calcResult.accountAmt }}
              </view>
              <view class="text-xs text-light text-center" v-else>--</view>
              <view class="text-xs text-light"> 到账金额 </view>
            </view>
          </view>
          <view class="border-b-gray mt-3"></view>
          <view class="text-xs text-light leading-8"
            >当前余额：{{ number }}元</view
          >
        </view>
      </view>
      <view class="bg-white rounded-2xl pt-2.5 pb-5 bg-box-shadow mt-5">
        <view class="mx-3.5">
          <!--提现规则后台配置-->
          <view class="text-base text-dark leading-8">提现规则</view>
          <view class="text-light text-xs leading-7">
            1、周五15：00 至 周日23：59 只可提现一次，如遇
            节假日，提现到账时间将顺延至正常工作日<br />2、提现第二天到账（24小时内）周五15点后提现的金额，
            周一到账<br />3、提现未到账之前，不可提现第二次<br />4、财务人员会将提现金额打入您已提交的任一收款账户，支付宝、微信、银行卡，届时请注意查收<br />5、提现只能提取整数<br />6、提现金额会随机发放到您的任意一个收款账户中
          </view>
        </view>
      </view>
      <view class="mx-10 mt-12">
        <view
          class="w-full bg-primary rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
          v-if="isShow"
          @click="withdrawTo"
          >提现</view
        >
        <view
          class="w-full bg-light rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow"
          v-else
          >提现</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  withdrawalInfo,
  calcFee,
  withdrawSubmit,
} from '../../services/account';

export default {
  data() {
    return {
      isShow: false,
      money: '',
      info: {
        userName: '',
      },
      calcResult: {
        accountAmt: '',
        optFee: '',
        withdrawalAmt: '',
      },
      timer: null, // 延时器的名字
      number: '',
    };
  },
  async created() {
    const { number } = this.$Route.query;
    this.number = number;
    this.getWithdrawalInfo();
  },
  methods: {
    //全部提现
    async allCash(number) {
      //this.money = number;
      this.calcFeeTo('', 1);
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //页面数据
    async getWithdrawalInfo() {
      const { code, data } = await withdrawalInfo();
      if (code != 200) return;
      this.info = data;
    },
    //根据到账金额计算费用
    async calcFeeTo(accountAmt, isGetAll) {
      var reg = /^(-?\d+)(\.\d{1,2})?$/;
      if (
        (accountAmt == '' || accountAmt == 0 || !reg.test(accountAmt)) &&
        isGetAll != 1
      ) {
        this.calcResult = {
          accountAmt: '',
          optFee: '',
          withdrawalAmt: '',
        };
        this.isShow = false;
        uni.showToast({
          title: '请输入正确到账金额',
          icon: 'none',
        });
        return;
      }
      // 每次触发 input 事件清除一次定时器
      clearTimeout(this.timer);
      // 每隔 500毫秒 触发定时器
      var _this = this;
      this.timer = setTimeout(() => {
        _this.calcFeeResult(accountAmt, isGetAll);
      }, 200);
    },
    async calcFeeResult(accountAmt, isGetAll) {
      var reg = /^(-?\d+)(\.\d{1,2})?$/;
      if (
        (accountAmt == '' || accountAmt == 0 || !reg.test(accountAmt)) &&
        isGetAll != 1
      ) {
        this.calcResult = {
          accountAmt: '',
          optFee: '',
          withdrawalAmt: '',
        };
        uni.showToast({
          title: '请输入正确到账金额',
          icon: 'none',
        });
        return;
      }
      let params = {
        accountAmt: accountAmt,
        isGetAll: isGetAll,
      };
      const { code, data } = await calcFee(params);
      if (code == 200) {
        this.calcResult = data;
        this.isShow = true;
        if (isGetAll == 1) {
          this.money = data.accountAmt;
        }
      } else {
        this.isShow = false;
        this.calcResult = {
          accountAmt: '',
          optFee: '',
          withdrawalAmt: '',
        };
      }
    },
    //确认提现
    async withdrawTo() {
      if (this.money == '') {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none',
        });
        return;
      }
      if (this.money == 0) {
        uni.showToast({
          title: '提现金额不能为0',
          icon: 'none',
        });
        return;
      }
      //提现接口
      const { code, data } = await withdrawSubmit({ accountAmt: this.money });
      if (code != 200) return;
      uni.$u.toast('提现提交成功');
      let pages = getCurrentPages();
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
          success() {
            pages[pages.length - 2].$vm._getWallet(); // => 刷新数据
          },
        });
      }, 1000);
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
</style>
